<template>
  <div class="my-icon">
    <span :style="{ backgroundColor: backgroundColor }"><i :class="[icon]"></i></span>
    <p><slot></slot></p>
  </div>
</template>

<script>
export default {
  props: {
    backgroundColor: {
      type: String,
      default: '#3856bd'
    },
    icon: {
      type: String,
      default: 'el-icon-s-custom'
    }
  }
};
</script>

<style lang="scss" scoped>
.my-icon {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  cursor: pointer;
  span {
    text-align: center;
    line-height: 23px;
    color: white;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    i {
      margin-top: 6px;
    }
  }
  p {
    margin-top: 5px;
    font-size: 12px;
  }
}
</style>
